<template>
  <div class="params">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-alert
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        show-icon
        :closable="false"
        effect="dark"
      >
      </el-alert>
      <el-form :model="form" ref="form" label-width="80" class="formfl">
        <el-form-item label="选择商品分类" class="cascader-box">
          <el-cascader
            v-model="value"
            :options="CategoriesList"
            :props="{
              expandTrigger: 'hover',
              label: 'cat_name',
              value: 'cat_id',
            }"
            @change="getAttributesList"
            ref="CategoriesF"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <el-tabs type="border-card">
        <!-- 动态参数 -->
        <el-tab-pane label="动态参数">
          <el-form>
            <el-form-item>
              <el-button
                type="primary"
                size="mini"
                :disabled="value === '' ? true : false"
                @click="addManyAttributesV"
                >添加参数</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-table
                border
                :data="AttributesList.manyAttributes"
                @expand-change="zhankai"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <span :key="i" v-for="(tag, i) in props.row.attr_vals">
                      <el-tag closable @close="tagClose(i, props.row)">
                        {{ tag }}
                      </el-tag>
                    </span>
                    <el-input
                      class="input-new-tag"
                      v-if="props.row.attr_id === flag"
                      v-model="tagsForm.inputValue"
                      ref="saveTagInput"
                      size="small"
                      @keyup.enter.native="handleInputConfirm(props.row)"
                      @blur="handleInputConfirm(props.row)"
                    >
                    </el-input>
                    <el-button
                      v-else
                      class="button-new-tag"
                      size="small"
                      @click="showInput(props.row)"
                      >+ New Tag</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column
                  label="参数名称"
                  prop="attr_name"
                ></el-table-column>
                <el-table-column label="操作">
                  <template #default="{row}">
                    <el-button
                      type="primary"
                      icon="el-icon-edit"
                      size="mini"
                      @click="putManyAttributesV(row)"
                      >修改</el-button
                    >
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      size="mini"
                      @click="delAttributes(row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form>

          <!-- 添加动态参数的框 -->
          <el-dialog
            title="添加动态参数"
            :visible.sync="AttributesList.addManyAttributesdialog"
            width="50%"
          >
            <el-form
              ref="addManyAttributesForm"
              :model="addManyAttributesForm"
              label-width="100px"
              :rules="rules"
            >
              <el-form-item label="动态参数" prop="attr_name">
                <el-input v-model="addManyAttributesForm.attr_name"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="AttributesList.addManyAttributesdialog = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="addManyAttributes"
                >确 定</el-button
              >
            </span>
          </el-dialog>

          <!-- 修改动态参数的框 -->
          <el-dialog
            title="修改动态参数"
            :visible.sync="AttributesList.putManyAttributesdialog"
            width="50%"
          >
            <el-form
              ref="putManyAttributesForm"
              :model="putManyAttributesForm"
              label-width="100px"
              :rules="rules"
            >
              <el-form-item label="动态参数" prop="attr_name">
                <el-input v-model="putManyAttributesForm.attr_name"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="AttributesList.putManyAttributesdialog = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="putManyAttributes"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </el-tab-pane>

        <!-- 静态属性 -->
        <el-tab-pane label="静态属性">
          <el-form>
            <el-form-item>
              <el-button
                type="primary"
                size="mini"
                :disabled="value === '' ? true : false"
                @click="addOnlyAttributesV"
                >添加属性</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-table border :data="AttributesList.onlyAttributes">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <span :key="i" v-for="(tag, i) in props.row.attr_vals">
                      <el-tag closable @close="tagClose(i, props.row)">
                        {{ tag }}
                      </el-tag>
                    </span>
                    <el-input
                      class="input-new-tag"
                      v-if="props.row.attr_id === flag"
                      v-model="tagsForm.inputValue"
                      ref="saveTagInput"
                      size="small"
                      @keyup.enter.native="handleInputConfirm(props.row)"
                      @blur="handleInputConfirm(props.row)"
                    >
                    </el-input>
                    <el-button
                      v-else
                      class="button-new-tag"
                      size="small"
                      @click="showInput(props.row)"
                      >+ New Tag</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column
                  label="参数名称"
                  prop="attr_name"
                ></el-table-column>
                <el-table-column label="操作">
                  <template #default="{row}">
                    <el-button
                      type="primary"
                      icon="el-icon-edit"
                      size="mini"
                      @click="putOnlyAttributesV(row)"
                      >修改</el-button
                    >
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      size="mini"
                      @click="delAttributes(row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form>

          <!-- 添加静态属性的框 -->
          <el-dialog
            title="添加静态属性"
            :visible.sync="AttributesList.addOnlyAttributesdialog"
            width="50%"
          >
            <el-form
              ref="addOnlyAttributesForm"
              :model="addOnlyAttributesForm"
              label-width="100px"
              :rules="rules"
            >
              <el-form-item label="静态属性" prop="attr_name">
                <el-input v-model="addOnlyAttributesForm.attr_name"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="AttributesList.addOnlyAttributesdialog = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="addOnlyAttributes"
                >确 定</el-button
              >
            </span>
          </el-dialog>

          <!-- 修改静态参数的框 -->
          <el-dialog
            title="修改动态参数"
            :visible.sync="AttributesList.putOnlyAttributesdialog"
            width="50%"
          >
            <el-form
              ref="putOnlyAttributesForm"
              :model="putOnlyAttributesForm"
              label-width="100px"
              :rules="rules"
            >
              <el-form-item label="动态参数" prop="attr_name">
                <el-input v-model="putOnlyAttributesForm.attr_name"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="AttributesList.putOnlyAttributesdialog = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="putOnlyAttributes"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Params',
  data() {
    return {
      flag: false,
      form: {},
      rules: {
        attr_name: [
          { required: true, message: '参数名称不能为空', trigger: 'blur' },
        ],
      },
      addManyAttributesForm: {
        attr_name: '',
        attr_sel: 'many',
        attr_vals: '',
      },
      putManyAttributesForm: {
        id: '',
        attrId: '',
        attr_name: '',
        attr_sel: 'many',
        attr_vals: '',
      },
      addOnlyAttributesForm: {
        attr_name: '',
        attr_sel: 'only',
        attr_vals: '',
      },
      putOnlyAttributesForm: {
        id: '',
        attrId: '',
        attr_name: '',
        attr_sel: 'only',
        attr_vals: '',
      },
      tagsForm: {
        id: '',
        attrId: '',
        list: [],
        inputVisible: false,
        inputValue: '',
        attr_sel: '',
        attr_name: '',
      },
      CategoriesList: [],
      value: '',
      CategoriesFrom: {
        type: '',
        pagenum: '',
        pagesize: '',
      },
      AttributesList: {
        onlyAttributes: [],
        manyAttributes: [],
        addManyAttributesdialog: false,
        addOnlyAttributesdialog: false,
        putManyAttributesdialog: false,
        putOnlyAttributesdialog: false,
      },
    };
  },
  methods: {
    // 修改动态参数
    putOnlyAttributes() {
      this.__apis.attributes
        .putAttributes(this.putOnlyAttributesForm)
        .then((res) => {
          // console.log(res);
          if (res.data.meta.status === 200) {
            this.$message.success('修改成功');
            this.getAttributes('only');
          } else {
            this.$message.error(res.data.meta.msg);
          }
        });
      this.AttributesList.putOnlyAttributesdialog = false;
    },
    // 获取要修改的动态参数数据
    putOnlyAttributesV(row) {
      this.putOnlyAttributesForm.id = row.cat_id;
      this.putOnlyAttributesForm.attrId = row.attr_id;
      this.putOnlyAttributesForm.attr_name = row.attr_name;
      this.AttributesList.putOnlyAttributesdialog = true;
    },

    // 修改动态参数
    putManyAttributes() {
      this.__apis.attributes
        .putAttributes(this.putManyAttributesForm)
        .then((res) => {
          // console.log(res);
          if (res.data.meta.status === 200) {
            this.$message.success('修改成功');
            this.getAttributes('many');
          } else {
            this.$message.error(res.data.meta.msg);
          }
        });
      this.AttributesList.putManyAttributesdialog = false;
    },
    // 获取要修改的动态参数数据
    putManyAttributesV(row) {
      this.putManyAttributesForm.id = row.cat_id;
      this.putManyAttributesForm.attrId = row.attr_id;
      this.putManyAttributesForm.attr_name = row.attr_name;
      this.AttributesList.putManyAttributesdialog = true;
    },

    // 删除参数
    delAttributes(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return this.__apis.attributes.deleteAttributes({
            id: row.cat_id,
            attrid: row.attr_id,
          });
        })
        .then((res) => {
          if (res.data.meta.status === 200) {
            this.$message.success('删除成功');
            this.getAttributesList();
          } else {
            this.$message.error(res.data.meta.msg);
          }
        })
        .catch(() => {});
    },
    // 显示添加标签控件
    showInput(row) {
      this.flag = row.attr_id;
      // this.tagsForm.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 添加标签
    handleInputConfirm(row) {
      // console.log(row);
      const inputValue = this.tagsForm.inputValue.trim();
      if (inputValue) {
        row.attr_vals.push(inputValue);
        this.putTags(row);
      }
      // this.tagsForm.inputVisible = false;
      this.flag = false;
      this.tagsForm.inputValue = '';
    },
    // 删除标签
    tagClose(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          row.attr_vals.splice(index, 1);
          this.putTags(row);
        })
        .catch(() => {});
    },
    // 修改标签
    putTags(row) {
      this.__apis.attributes
        .putAttributes({
          id: row.cat_id,
          attrId: row.attr_id,
          attr_sel: row.attr_sel,
          attr_name: row.attr_name,
          attr_vals: row.attr_vals.join(','),
        })
        .then((res) => {
          // console.log(res);
          if (res.data.meta.status === 200) {
            this.$message.success('修改成功');
          } else {
            this.$message.error(res.data.meta.msg);
          }
        });
    },
    // 展开事件
    zhankai(row, expandedRows) {
      // console.log(row.attr_id);
    },
    // 添加动态参数
    addManyAttributes() {
      this.AttributesList.addManyAttributesdialog = false;
      this.__apis.attributes
        .postAttributes({
          id: this.value[2],
          attr_name: this.addManyAttributesForm.attr_name,
          attr_sel: this.addManyAttributesForm.attr_sel,
          attr_vals: this.addManyAttributesForm.attr_vals,
        })
        .then((res) => {
          if (res.data.meta.status === 201) {
            this.$message.success('添加成功');
            this.getAttributes('many');
          } else {
            this.$message.error(res.data.meta.msg);
          }
        });
    },
    // 添加静态属性
    addOnlyAttributes() {
      this.AttributesList.addOnlyAttributesdialog = false;
      this.__apis.attributes
        .postAttributes({
          id: this.value[2],
          attr_name: this.addOnlyAttributesForm.attr_name,
          attr_sel: this.addOnlyAttributesForm.attr_sel,
          attr_vals: this.addOnlyAttributesForm.attr_vals,
        })
        .then((res) => {
          if (res.data.meta.status === 201) {
            this.$message.success('添加成功');
            this.getAttributes('only');
          } else {
            this.$message.error(res.data.meta.msg);
          }
        });
    },
    // 获取用来添加动态的参数
    addManyAttributesV() {
      this.AttributesList.addManyAttributesdialog = true;
    },
    // 获取用来添加静态的属性
    addOnlyAttributesV() {
      this.AttributesList.addOnlyAttributesdialog = true;
    },
    // 分类选择后获取参数列表
    getAttributesList() {
      this.getAttributes('only');
      this.getAttributes('many');
    },
    // 获取分类列表
    getCategoriesList() {
      this.__apis.goods
        .getCategoriesList({
          type: this.CategoriesFrom.type,
          pagenum: this.CategoriesFrom.pagenum,
          pagesize: this.CategoriesFrom.pagesize,
        })
        .then((res) => {
          //   console.log(res);
          this.CategoriesList = res.data.data;
          this.CategoriesList.forEach((v) => {
            if (!v.children) {
              v.disabled = true;
              return;
            }
            v.children.forEach((v) => {
              if (!v.children) {
                v.disabled = true;
              }
            });
          });
          // console.log(this.CategoriesList);
        });
    },
    // 获取参数列表
    getAttributes(sel) {
      this.__apis.attributes
        .getAttributes({
          id: this.value[2],
          sel,
        })
        .then((res) => {
          // console.log(res);
          if (sel === 'only') {
            if (res.data.meta.status === 200) {
              // console.log(res);
              this.AttributesList.onlyAttributes = res.data.data;
              this.AttributesList.onlyAttributes.forEach((v) => {
                v.attr_vals = v.attr_vals.split(',');
                v.attr_vals.forEach((v2, i) => {
                  if (v2 === '') {
                    v.attr_vals.splice(i, 1);
                  }
                });
              });
            } else {
              this.$message.error(res.data.meta.msg);
            }
          } else if (sel === 'many') {
            if (res.data.meta.status === 200) {
              this.AttributesList.manyAttributes = res.data.data;
              this.AttributesList.manyAttributes.forEach((v) => {
                v.attr_vals = v.attr_vals.split(',');
                v.attr_vals.forEach((v2, i) => {
                  if (v2 === '') {
                    v.attr_vals.splice(i, 1);
                  }
                });
              });
            } else {
              this.$message.error(res.data.meta.msg);
            }
          }
        });
    },
  },
  created() {
    this.getCategoriesList();
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  font-size: 12px;
}
.el-card {
  margin-top: 15px;
  font-size: 13px;
  .el-alert {
    padding: 11px 16px 8px;
  }
  .el-form.formfl {
    margin-top: 20px;
  }
  .el-form-item__content {
    line-height: 0;
  }
  .el-tag {
    margin-right: 10px;
  }
  .input-new-tag {
    width: 200px;
  }
}
</style>
